<!DOCTYPE html>
<html>
<head hexo-theme='https://github.com/volantis-x/hexo-theme-volantis/tree/4.0.0-rc.4'>
  <meta charset="utf-8">
  <!-- SEO相关 -->
  
    
  
  <!-- 渲染优化 -->
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="HandheldFriendly" content="True" >
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv='x-dns-prefetch-control' content='on' />

  <!-- 页面元数据 -->
  
  <title>HEXO折腾 - CC康纳百川</title>
  
    <meta name="keywords" content="HEXO">
  

  

  <!-- feed -->
  

  <!-- import meta -->
  

  <!-- link -->
  <link rel='dns-prefetch' href='https://cdn.jsdelivr.net'>
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14/css/all.min.css">

  
  

  

  

  

  

  <!-- import link -->
  

  
  
    
<link rel="stylesheet" href="/volantis/css/style.css">

  
  
  
  <!-- 脚本懒加载函数 -->
  <script>
  function loadScript(src, cb) {
    var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    if (cb) script.onload = cb;
    script.setAttribute('src', src);
    HEAD.appendChild(script);
  }
  //https://github.com/filamentgroup/loadCSS
  !function(c){"use strict";var e=function(e,t,n,r){var o,i=c.document,a=i.createElement("link");if(t)o=t;else{var d=(i.body||i.getElementsByTagName("head")[0]).childNodes;o=d[d.length-1]}var f=i.styleSheets;if(r)for(var l in r)r.hasOwnProperty(l)&&a.setAttribute(l,r[l]);a.rel="stylesheet",a.href=e,a.media="only x",function e(t){if(i.body)return t();setTimeout(function(){e(t)})}(function(){o.parentNode.insertBefore(a,t?o:o.nextSibling)});var s=function(e){for(var t=a.href,n=f.length;n--;)if(f[n].href===t)return e();setTimeout(function(){s(e)})};function u(){a.addEventListener&&a.removeEventListener("load",u),a.media=n||"all"}return a.addEventListener&&a.addEventListener("load",u),(a.onloadcssdefined=s)(u),a};"undefined"!=typeof exports?exports.loadCSS=e:c.loadCSS=e}("undefined"!=typeof global?global:this);
  </script>
  <script id="loadcss"></script>
</head>

<body>
  <header class="l_header auto shadow blur " style='opacity: 0' >
  <div class='container'>
  <div class='wrapper'>
    <div class='nav-sub'>
      <p class="title"></p>
      <ul class='switcher nav-list-h m-phone' id="pjax-header-nav-list">
        <li><a class="s-comment fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
          <li><a class="s-toc fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
      </ul>
    </div>
		<div class="nav-main">
      
        
        <a class="title flat-box" target="_self" href='/volantis/'>
          
            <img no-lazy class='logo' src='https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn/logo/logo.png'/>
          
          
          
        </a>
      

			<div class='menu navigation'>
				<ul class='nav-list-h m-pc'>
          
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/
                  
                  
                  
                    id="volantis"
                  >
                  <i class='fas fa-rss fa-fw'></i>博客
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/categories/
                  
                  
                  
                    id="volantiscategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/tags/
                  
                  
                  
                    id="volantistags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/archives/
                  
                  
                  
                    id="volantisarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/friends/
                  
                  
                  
                    id="volantisfriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/about/
                  
                  
                  
                    id="volantisabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
          
				</ul>
			</div>

      <div class="m_search">
        <form name="searchform" class="form u-search-form">
          <i class="icon fas fa-search fa-fw"></i>
          <input type="text" class="input u-search-input" placeholder="Search..." />
        </form>
      </div>

			<ul class='switcher nav-list-h m-phone'>
				
					<li><a class="s-search fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
				
				<li>
          <a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
          <ul class="menu-phone list-v navigation white-box">
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/
                  
                  
                  
                    id="volantis"
                  >
                  <i class='fas fa-rss fa-fw'></i>博客
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/categories/
                  
                  
                  
                    id="volantiscategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/tags/
                  
                  
                  
                    id="volantistags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/archives/
                  
                  
                  
                    id="volantisarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/friends/
                  
                  
                  
                    id="volantisfriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover" href=/volantis/about/
                  
                  
                  
                    id="volantisabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
            
          </ul>
        </li>
			</ul>
		</div>
	</div>
  </div>
</header>

  <div class="l_body">
    <div class="l_cover">
  
    
    
        <div class='cover-wrapper post dock' style="display: none;">
          
            <div class='cover-bg lazyload placeholder' data-bg="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg"></div>
          
          <div class='cover-body'>
  <div class='top'>
    
    
      <p class="title">Volantis</p>
    
    
  </div>
  <div class='bottom'>
    <div class='menu navigation'>
      <div class='list-h'>
        
          
            <a href="/volantis/v4/getting-started/"
              
              
              id="volantisv4getting-started">
              <img src='https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f5c3.svg'><p>文档</p>
            </a>
          
            <a href="/volantis/faqs/"
              
              
              id="volantisfaqs">
              <img src='https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f516.svg'><p>帮助</p>
            </a>
          
            <a href="/volantis/examples/"
              
              
              id="volantisexamples">
              <img src='https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f396.svg'><p>示例</p>
            </a>
          
            <a href="/volantis/contributors/"
              
              
              id="volantiscontributors">
              <img src='https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f389.svg'><p>社区</p>
            </a>
          
            <a href="/volantis/archives/"
              
              
              id="volantisarchives">
              <img src='https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4f0.svg'><p>博客</p>
            </a>
          
            <a target="_blank" rel="noopener" href="https://github.com/volantis-x/hexo-theme-volantis/"
              
              
              id="https:githubcomvolantis-xhexo-theme-volantis">
              <img src='https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f9ec.svg'><p>源码</p>
            </a>
          
        
      </div>
    </div>
  </div>
</div>

          <div class="scroll-down" style="display: none;"><i class="fa fa-chevron-down scroll-down-effects"></i></div>
        </div>
    
  
  </div>
  
    <div class='safearea'>
      <div class='body-wrapper' id="pjax-container">
        
          <!--此文件用来存放一些不方便取值的变量--> 
<!--思路大概是将值藏到重加载的区域内--> 
 
 
 
<div id="pjax-data" style="display: none"> 
  <div id="pjax-ispage">true</div> 
  <div id="pjax-pageTitle">HEXO折腾</div> 
  <div id="pjax-enable-cover">true</div> 
  <div id="pjax-comment-path"></div> 
  <div id="pjax-comment-placeholder"></div> 
</div> 
 
 
<script> 
  // 处理封面 此时 jquery 还没加载 
  if ("half" == "none") { // 移除封面 
    document.getElementsByClassName('cover-wrapper')[0].style.display = "none"; 
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.add("show"); 
  } else { 
    if ("half" == "half") { // 半屏 
      document.getElementsByClassName('cover-wrapper')[0].setAttribute('id', 'half'); 
      document.getElementsByClassName('scroll-down')[0].style.display = "none"; 
    } else if ("half" == "full") { // 全屏 
      document.getElementsByClassName('cover-wrapper')[0].setAttribute('id', 'full'); 
      document.getElementsByClassName('scroll-down')[0].style.display = ""; 
    } 
    document.getElementsByClassName('cover-wrapper')[0].style.display = ""; 
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.remove("show"); 
  } 
</script> 
 

        
        

<div class='l_main'>
  <article class="article post white-box reveal md shadow article-type-post" id="post" itemscope itemprop="blogPost">
  


  
  <div class="article-meta" id="top">
    
    
    
      <h1 class="title">
        HEXO折腾
      </h1>
      <div class='new-meta-box'>
        
          
            
<div class='new-meta-item author'>
  <a class='author' href="/" rel="nofollow">
    <img no-lazy src="">
    <p>请设置文章作者</p>
  </a>
</div>

          
        
          
            
  <div class='new-meta-item category'>
    <a class='notlink'>
      <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>
      <a class="category-link" href="/volantis/categories/HEXO/">HEXO</a>
    </a>
  </div>


          
        
          
            <div class="new-meta-item date">
  <a class='notlink'>
    <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
    <p>发布于：2020年7月1日</p>
  </a>
</div>

          
        
          
            
  <div class="new-meta-item browse leancloud">
    <a class='notlink'>
      
      <div id="lc-pv" data-title="HEXO折腾" data-path="/volantis/posts/3/">
        <i class="fas fa-eye fa-fw" aria-hidden="true"></i>
        <span id='number'><i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i></span>
        次浏览
      </div>
    </a>
  </div>


          
        
      </div>
    
  </div>


  
  <p><strong>个人目前使用主题为Butterfly <code>3.0.1</code>版本，HEXO <code>5.0.2</code>版本</strong></p>
<p>请按照以下步骤依次安装相应依赖和框架</p>
<h2 id="搭建步骤"><a href="#搭建步骤" class="headerlink" title="搭建步骤"></a>搭建步骤</h2><h3 id="安装-Node-js"><a href="#安装-Node-js" class="headerlink" title="安装 Node.js"></a>安装 Node.js</h3><blockquote>
<p><strong>什么是 Node.js ？</strong><br>这得从什么是 JS 说起，JS 也就是 JavaScript。（为什么有种从盘古开天辟地开始的感觉）没错，JavaScript 就是网页的盘古。JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。<br>JavaScript 语法简单，易学易用。（当然也请不要小瞧它，虽然它入门门槛低，但上限同样也很高。包括但不限于实现网站前后端，手机桌面应用程序，机器学习，计算机图形学等。）<br>在 Node.js 诞生前，JavaScript 都运行于浏览器端。也就是说，它是鱼，浏览器是装满了水的水缸。<br>2008 年，Chrome V8 诞生。2009 年，Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解，后续再说。<br>Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。（当年第一次看到这句话时，我也一脸懵逼。）按照我的理解，JavaScript 是鱼，Chrome V8 就是抽水机，Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸，也可以在里面运行 JavaScript 了！<br>当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的，不再展开。<br><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/node.js/7567977">Node.js | 百度百科</a><br><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript | MDN</a></p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://nodejs.org/zh-cn/">下载｜ Node.js</a></p>
<p>建议下载<strong>长期支持版</strong>而非<strong>当前发布版</strong>（因为如果是最新版，容易出现一些奇妙的 bug）。</p>
<p>全部默认下一步进行安装。</p>
<p>Windows 打开命令提示符，macOS 打开终端。（= =，这个不会就请百度吧。）<br>Linux 用户右上角关闭本标签页。</p>
<p>后续如提到输入命令，均默认指打开终端进行输入。</p>
<p>输入 <code>node --version</code>，如果得到的版本号与你方才安装的一致，那么 Node.js 就已经成功安装。</p>
<blockquote>
<p>Node.js 安装成功时也默认安装了 <code>npm</code>，在此后将会用到。<br><code>npm</code> 是随 Node.js 一起被安装的包管理工具，你可以理解成 Node.js 自带的应用商店。</p>
</blockquote>
<p>对了，国内使用 npm 可能很慢。</p>
<p><strong>你可以考虑切换为 <code>taobao</code> 镜像源。</strong></p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>

<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.yuque.com/yunyoujun/notes/npm-and-yarn#nrm">npm &amp; yarn 常用包与命令</a></p>
</blockquote>
<h3 id="Git-与-GitHub"><a href="#Git-与-GitHub" class="headerlink" title="Git 与 GitHub"></a>Git 与 GitHub</h3><h4 id="安装-Git"><a href="#安装-Git" class="headerlink" title="安装 Git"></a>安装 Git</h4><blockquote>
<p>Visual Studio Code，简称 VS Code。<br>目前最为强大易用的编辑器，轻量且快速。（<del>宇宙第一编辑器</del>）<br>注意：它并不是我们常常听到的 VS，VS 常常指的是 Visual Studio，是一个功能强大的 IDE（集成开发环境），体积也相比 VS Code 都要大上一个量级。</p>
</blockquote>
<p>在此之前，我建议你先安装 <a target="_blank" rel="noopener" href="https://code.visualstudio.com/">VS Code</a>。因为安装 Git Bash 时，可以设置 VS Code 作为默认编辑器。</p>
<blockquote>
<p>Git 是一个开源的分布式版本控制系统，由 Linus Torvalds（同时也是 Linux 的作者）为了管理 Linux 开发而开发。<br>简而言之，是一个版本管理工具。譬如设计师设计好了第三版的海报，客户却说还是要第一版吧，这时便可以通过 Git 快速回退到最初的版本。<br>你只需要把每次更改的状态（Git 会自动进行检测，你只要掌握基础的几条命令就可以了）告诉 Git，而不需要每个版本都保存一份压缩包，既方便也能大大节约空间。<br>（当然这主要只对代码文本起作用，因为 Git 的本质是记录各行代码的增减，倘若是像视频、海报这类二进制文件来说便体现不出丝毫优势了。当然想要应对这种场景还有 <a target="_blank" rel="noopener" href="https://git-lfs.github.com/">Git LFS</a>。）</p>
</blockquote>
<p>下载 <a target="_blank" rel="noopener" href="https://git-scm.com/">Git</a> 并安装（如果国内速度太慢，可以试试<a target="_blank" rel="noopener" href="https://pc.qq.com/detail/13/detail_22693.html">这里</a>）</p>
<p>macOS 用户可以下载官网的安装包进行安装，也可以直接安装 App Store 的 Xcode（附带会安装 Git，但是比较大）。</p>
<blockquote>
<p>类似的工具还有：SVN。但始终更推荐 Git，因为它功能更为强大且它的背后还有更强大的生态：GitHub。</p>
</blockquote>
<h4 id="注册-GitHub"><a href="#注册-GitHub" class="headerlink" title="注册 GitHub"></a>注册 GitHub</h4><p>这一部分内容，你也可以放到本地调试并预览成功后并打算线上部署的时候，再回过头来看。</p>
<blockquote>
<p>GitHub 一听便与 Git 有所渊源。<code>Git</code> 在英文中是懒人、饭桶之意。<code>Hub</code> 则是中心、集线器的意思。譬如 USB 集线器就是 USB Hub。所以 GitHub 就是饭桶中心（<del>大雾</del>）。<br>GitHub 是全世界最大的开源项目与代码托管平台，也是众多开发者的交流场所。<del>还是全球最大的同性交友网站</del>。<br>而代码托管本身用到的正是上文提到的 Git 技术。</p>
</blockquote>
<p>注册 <a target="_blank" rel="noopener" href="https://github.com/">GitHub</a> 账号。（虽然都是英文，但不必畏惧，也并不会造成使用障碍，只要记得最常用的选项含义即可，以及善用手头的翻译软件。）</p>
<blockquote>
<p>注意：注册时的英文用户名将成为你可以使用的免费域名前缀。</p>
</blockquote>
<p>登录 GitHub。</p>
<blockquote>
<p>为什么要用 GitHub？<br>对于平民玩家来说，在初次尝试建立自己的网站时，也许并不会有闲钱或者说决心来购买自己的服务器与域名。<br>而 GitHub 则提供了 <a target="_blank" rel="noopener" href="https://pages.github.com/">GitHub Pages</a> 这一服务。<br>用户们可以利用这一服务，部署自己的静态站点。</p>
</blockquote>
<p>点击右上角的 <code>+</code> -&gt; <code>New repository</code> 新建仓库。</p>
<p>仓库名称务必为 <code>你的用户名.github.io</code>，用户名是英文，大小写无所谓，但建议统一小写。（因为你会发现时常切换大小写很麻烦）</p>
<blockquote>
<p>为什么必须这个作为仓库名？<br>GitHub Pages 服务的命名规范，同时若您没有自己的域名，使用Github提供的服务的话，请务必将此仓库设为公开，同时它也将成为你的专属域名。当然，你也可以购置自己的专属域名并用它来提供内容。</p>
</blockquote>
<p>点击 <code>Create repository</code>。</p>
<h3 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h3><p><a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a></p>
<ul>
<li>GitHub: <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo">https://github.com/hexojs/hexo</a></li>
<li><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/index.html">官方文档</a>（直接参考文档也是一个不错的选择）</li>
</ul>
<blockquote>
<p><strong>为嘛使用 Hexo ？</strong><br>Hexo 是一个快速、简洁而强大的博客框架，基于 Node.js，同样托管于 GitHub 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。<br>你可以使用别人的各种主题与插件，也可以自己定制开发想要的功能。<br><strong>为什么不是…?</strong><br>其他常用的博客框架还有 <a target="_blank" rel="noopener" href="https://wordpress.org/">WordPress</a>，<a target="_blank" rel="noopener" href="https://typecho.org/">Typecho</a>，<a target="_blank" rel="noopener" href="https://ghost.org/">Ghost</a> 等，但这些往往都需要购置自己的服务器，而无法静态化地部署到 GitHub Pages 上。（当然，相应的功能和灵活性也大大提升。）静态化站点还有一个优势就是访问速度往往更快。<br>静态网站生成器还有 <a target="_blank" rel="noopener" href="https://vuepress.vuejs.org/">Vuepress</a>，<a target="_blank" rel="noopener" href="https://www.gatsbyjs.org/">Gatsby</a> 等。但这些多是为了写文档而量身定制的，你也可以使用它们，但是相较 Hexo 的博客定位，它们关于博客的插件和主题以及解决办法会少得多。<br>Hexo 提供的功能与 <a target="_blank" rel="noopener" href="https://gohugo.io/">Hugo</a> 几乎都有，（生成大量文件时，甚至比 Hexo 更快）不过它是基于 GO 语言。日后你想对自己的网站进行自定义，即便是 Hugo，你编写前端的交互仍旧需要使用 JavaScript，所以选择基于 JavaScript 的 Hexo 可以降低学习成本。（你若对 GO 有兴趣，仍然可以尝试使用 Hugo，但本教程将不会针对 Hugo 进行展开。）<br>所以对于新手来说，使用 Hexo 作为起始点，不失为一个好选择。（当然如果你有钱租服务器，并希望快速上手的话，就可以考虑考虑 WordPress 或者 Typecho）<br>这里顺带推荐一下小伙伴 <a target="_blank" rel="noopener" href="https://asuhe.jp/">染川瞳</a> 的 WordPress 主题 <a target="_blank" rel="noopener" href="https://github.com/mirai-mamori/Sakurairo">Sakurairo</a>，<a target="_blank" rel="noopener" href="https://guhub.cn/">阔落</a> 的 Typecho 主题 <a target="_blank" rel="noopener" href="https://github.com/BigCoke233/miracles">miracles</a>，都是很漂亮的主题。</p>
</blockquote>
<p>在终端中输入以下命令：</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br><span class="line"><span class="comment"># 如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行</span></span><br><span class="line"><span class="comment"># sudo npm install hexo-cli -g</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>install</code> 自然是安装。<br><code>hexo-cli</code> 则是 <code>hexo</code> 的终端工具，可以帮助你生成一些模版文件，之后再用到。<br><code>-g</code> 代表的是全局安装。也就是在任何地方都可以使用，否则会只能在安装的目录下使用。</p>
</blockquote>
<p>此时，请先通过 <code>cd</code> 进入你本地电脑打算存储网站代码的文件夹目录。（或者右键文件夹 Git Bash Here）</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/cd/3516393">cd | DOS 命令</a><br><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/cd/3516411">cd （LINUXSHELL 命令）</a></p>
</blockquote>
<p>譬如：</p>
<blockquote>
<p>注意：这里是你自定义的目录，请不要复制粘贴</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># &#x27;#&#x27; 字符后的文字代表注释，不需要输入</span></span><br><span class="line"><span class="comment"># Windows</span></span><br><span class="line"><span class="built_in">cd</span> C:\Users\CCKNBC\Documents\GitHub\</span><br><span class="line"><span class="comment">#实际上我用的是D:blog目录,按需选择即可</span></span><br><span class="line"><span class="comment"># macOS</span></span><br><span class="line"><span class="comment"># cd /Users/yunyou/github/</span></span><br></pre></td></tr></table></figure>

<p>接下来输入：</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">hexo init 你的名字.github.io</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>hexo</code> 正是因为我们之前安装了 <code>hexo-cli</code> 这一个包，所以我们可以在终端中使用 <code>hexo</code> 这一命令。<br><code>init</code> 初始化博客的模版文件。后面跟的是你要新建的文件夹，最好和你此前新建的仓库名一致。</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 进入你的博客文件夹</span></span><br><span class="line"><span class="built_in">cd</span> 你的名字.github.io</span><br><span class="line"><span class="comment"># 默认安装所有 `package.json` 文件中提到的包</span></span><br><span class="line">npm install</span><br><span class="line"><span class="comment"># 你也可以缩写成 hexo s</span></span><br><span class="line">hexo server</span><br></pre></td></tr></table></figure>

<p><code>server</code> 代表开启本地的 Hexo 服务器，这时你就可以打开浏览器，在地址栏中输入 <code>localhost:4000</code> 就可以看到本地的网页了。</p>
<p>按 <code>Ctrl + C</code> 中断服务器的运行。</p>
<p>至此，基础的模版页面便已经搭建好了。</p>
<h3 id="主题安裝"><a href="#主题安裝" class="headerlink" title="主题安裝"></a>主题安裝</h3><h3 id="使用-Hexo-主题"><a href="#使用-Hexo-主题" class="headerlink" title="使用 Hexo 主题"></a>使用 Hexo 主题</h3><p>Hexo 默认提供的是 <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-theme-landscape">hexo-theme-landscape</a> 主题。<br>默认主题样式简单，功能较少。所以大多数人并不会使用默认主题。</p>
<h3 id="Git-安装"><a href="#Git-安装" class="headerlink" title="Git 安装"></a>Git 安装</h3><p>在博客根目录里安装稳定版<code>master</code>分支【推荐】</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> master https://github.com/jerryc127/hexo<span class="literal">-theme</span><span class="literal">-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure>

<p>如果想要安装比较新的<code>dev</code>分支，可以</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> dev https://github.com/jerryc127/hexo<span class="literal">-theme</span><span class="literal">-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure>

<h3 id="npm-安装"><a href="#npm-安装" class="headerlink" title="npm 安装"></a>npm 安装</h3><blockquote>
<p>此方法只支持<code>Hexo 5.0.0</code>以上版本</p>
</blockquote>
<p>在博客根目录里</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">npm i hexo<span class="literal">-theme</span><span class="literal">-butterfly</span></span><br></pre></td></tr></table></figure>

<h3 id="应用主题"><a href="#应用主题" class="headerlink" title="应用主题"></a>应用主题</h3><p>修改hexo配置文件<code>_config.yml</code>（根目录），把主题改为<code>Butterfly</code>（注意配置要和你的主题文件夹名大小写完全一致哦）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">theme: butterfly</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果你沒有<code>pug</code>以及<code>stylus</code>的渲染器，请下载安装： </p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在进行配置修改之前，为了以后主题通过git pull平滑升级，请不要随意改动主题源码，虽然你可以通过强制合并来解决，但保险点总是没错的，并且由于主题的**<code>约定&gt;配置</code><strong>特性，因此我们通常在Hexo根目录</strong><code>sorce/_data</code><strong>下把主题的</strong><code>_config.yml</code><strong>（主题目录）复制过来，并且重命名为</strong><code>butterfly.yml</code>**，然后再对butterfly.yml进行修改即可</p>
</blockquote>
<p>有了上面的基础，我们就可以根据对应的**<a target="_blank" rel="noopener" href="https://demo.jerryc.me/">文档</a>**修改相应的配置了,以下不再赘述</p>
<h3 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h3><p>至今我们的工作都是在本地进行，想必你也很想放到线上与小伙伴们分享。<br>这便轮到了 GitHub Pages 的出场，不过 GitHub Pages 只支持纯静态文件。</p>
<p>所以我们需要使用以下命令先来生成站点的静态文件。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果进行多次生成，为了避免受错误缓存影响，最好使用 hexo clean 先清除一遍。</span></span><br><span class="line">hexo generate</span><br><span class="line"><span class="comment"># 缩写为 hexo g</span></span><br></pre></td></tr></table></figure>

<p>此时你的文件夹目录下会出现 <code>public</code> 这个文件夹，里面存放的就是你站点的静态文件。</p>
<h3 id="与远程仓库建立关联"><a href="#与远程仓库建立关联" class="headerlink" title="与远程仓库建立关联"></a>与远程仓库建立关联</h3><p>接下来我们将本地的仓库与此前在 GitHub 上建立的仓库建立关联。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">git init <span class="comment"># 初始化 Git 仓库，只需要执行一次即可</span></span><br></pre></td></tr></table></figure>

<p>在将其部署到 GitHub Pages 上之前，我们最好先建立一个分支。</p>
<blockquote>
<p>什么是分支？<br>Git 提供了版本管理功能，其中还有一个分支功能，你现在可以简单地将其理解为平行世界。</p>
</blockquote>
<p><code>你的名字.github.io</code> 部署后，GitHub Pages 将默认使用你的 master 分支作为静态文件部署。<br>所以我们最好新建一个 hexo 分支（命名无所谓）用来存储 Hexo 地源代码，master 分支则用来存储部署后的静态文件。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">git checkout -b hexo</span><br></pre></td></tr></table></figure>

<p>这时便成功建立了一个 hexo 分支。（此后的工作都将在 hexo 分支下进行）</p>
<p>你可以通过 <code>git branch -v</code> 来查看当前有哪些分支，使用 <code>git branch 分支名</code> 来切换到对应的分支。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.yunyoujun.cn/note/git-learn-note/">Git 学习笔记</a></p>
</blockquote>
<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><p>为了更方便的部署到 GitHub Pages，Hexo 提供了 <code>hexo-deployer-git</code> 插件。</p>
<p>老规矩，安装。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm install hexo-deployer-git</span><br></pre></td></tr></table></figure>

<p>在 <code>_config.yml</code> 中配置。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">你此前新建的仓库的链接</span> <span class="comment"># 比如：https://github.com/YunYouJun/yunyoujun.github.io</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span> <span class="comment"># 默认使用 master 分支</span></span><br><span class="line">  <span class="attr">message:</span> <span class="string">Update</span> <span class="string">Hexo</span> <span class="string">Static</span> <span class="string">Content</span> <span class="comment"># 你可以自定义此次部署更新的说明</span></span><br></pre></td></tr></table></figure>

<p>保存，部署！</p>
<blockquote>
<p>第一次可能需要你输入用户名与密码。<br>密码输入的时候不会出现 ***，不要害怕，已经输入进去了。</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">hexo deploy</span><br></pre></td></tr></table></figure>

<p>等待完成后，打开网址 <code>https://你的名字.github.io</code> 就能看到你的线上网站了。</p>
<blockquote>
<p>使用 https，http 可能无法正常打开。HTTPS 是多了安全加密的 HTTP，Chrome 浏览器已经默认会显示 <code>http</code> 链接为不安全。<br>为了安全，建议开启强制 https 跳转。<code>项目地址页面 -&gt; Settings -&gt; Options -&gt; GitHub Pages -&gt; Enforce HTTPS</code>。（翻到下面）<br>此时，http 网址会自动重定向到 https</p>
</blockquote>
<h3 id="备份与自动部署"><a href="#备份与自动部署" class="headerlink" title="备份与自动部署"></a>备份与自动部署</h3><p>我们当前只是将生成的静态文件部署到了云端。</p>
<p>为了以防万一，我们应该将网站的源代码文件也推送到 GitHub 仓库备份。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 与远程 Git 仓库建立连接，只此一次即可</span></span><br><span class="line">git remote add origin https://github.com/你的用户名/你的名字.github.io</span><br></pre></td></tr></table></figure>

<p>接下来准备提交，这几句命令将是你以后每次备份所需要输入。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 添加到缓存区</span></span><br><span class="line">git add -A</span><br><span class="line">git commit -m <span class="string">&quot;这次做了什么更改，简单描述下即可&quot;</span></span><br><span class="line"><span class="comment"># 推送至远程仓库</span></span><br><span class="line">git push</span><br><span class="line"><span class="comment"># 第一次提交，你可能需设置一下默认提交分支</span></span><br><span class="line"><span class="comment"># git push --set-upstream origin hexo</span></span><br></pre></td></tr></table></figure>

<p>每次推送都要输入这三条命令，你可能觉得有些麻烦。<br>那么你可以编写 bash 脚本。</p>
<p>譬如，在根目录下新建 <code>update.sh</code>。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果没有消息后缀，默认提交信息为 `:pencil: update content`</span></span><br><span class="line">info=<span class="variable">$1</span></span><br><span class="line"><span class="keyword">if</span> [<span class="string">&quot;<span class="variable">$info</span>&quot;</span> = <span class="string">&quot;&quot;</span>];</span><br><span class="line"><span class="keyword">then</span> info=<span class="string">&quot;:pencil: update content&quot;</span></span><br><span class="line"><span class="keyword">fi</span></span><br><span class="line">git add -A</span><br><span class="line">git commit -m <span class="string">&quot;<span class="variable">$info</span>&quot;</span></span><br><span class="line">git push origin hexo</span><br></pre></td></tr></table></figure>

<p>此后更新的话，只需要在终端执行 <code>sh update.sh</code> 即可。</p>
<p>更新麻烦，每次部署也很麻烦，可以使用持续集成进行自动部署。</p>
<blockquote>
<p>什么是持续集成？<br>持续集成是一种软件开发实践。对软件进行自动化构建，以此来发现错误。<br>Travis CI 就是一个线上持续集成服务的提供商。它可以拉取你每次推送到 GitHub 上的代码，然后根据你的要求对其进行构建。<br>我们可以趁机让它自动生成网站静态文件，然后自动帮我们部署。<br>除此之外，你还可以使用 <a target="_blank" rel="noopener" href="https://help.github.com/en/actions/getting-started-with-github-actions/about-github-actions">GitHub Actions</a> ，<a target="_blank" rel="noopener" href="https://www.netlify.com/">Netlify</a> 等服务。<br>GitHub Actions 相比 Travis 等，自身便拥有仓库的 Token，不再需要额外设置，可以直接使用 <code>secrets.GITHUB_TOKEN</code>。<br>推荐一个专门用来部署 gh-pages 的 Actions <a target="_blank" rel="noopener" href="https://github.com/peaceiris/actions-gh-pages">actions-gh-pages</a></p>
</blockquote>
<p>关于更多更具体的自动化部署方案和操作步骤，你可以参考我的小伙伴 ChrAlpha 的 <a target="_blank" rel="noopener" href="https://blog.ichr.me/post/automated-deployment-of-serverless-static-blog/">初探无后端静态博客自动化部署方案</a>。</p>
<p>他在文章中详细介绍了 Netlify 、GitHub Actions 和 Travis CI 的部署方法。</p>
<p>你也可以参考 Hexo 的官方文档 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/github-pages">将 Hexo 部署到 GitHub Pages</a></p>
<p>我就不在此画蛇添足。</p>
<hr>
<p>当然还有个更简便的方法，直接参考我的 <a target="_blank" rel="noopener" href="https://github.com/YunYouJun/yunyoujun.github.io/blob/hexo/.github/workflows/gh-pages.yml">gh-pages.yml</a>。</p>
<p>去掉夹在 <code>yarn install</code> 与 <code>yarn build</code> 之间的 <code>algolia</code> 部分，直接粘贴到你的 <code>.github/workflows/</code> 文件夹（自己新建）下 <code>xxx.yml</code> 文件里即可。</p>
<p>推送后便可直接自动部署。</p>
<p>至此，你的站点便基本搭建完成，此后继续对主题进行自定义吧。</p>
<h3 id="开始写作"><a href="#开始写作" class="headerlink" title="开始写作"></a>开始写作</h3><h4 id="文章"><a href="#文章" class="headerlink" title="文章"></a>文章</h4><p>输入以下命令即可新建 <code>xxx.md</code> 文件。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">hexo new post xxx</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>md</code> 是 <code>Markdown</code> 的后缀名，是一种简洁方便的文本标记语言。你只需要记住简单的几种语法，就可以快速进行编写。<br>为什么使用 Markdown？<br>首先 Hexo 本身就是将 Markdown 转化为静态的 Html 文件，来方便用户编写文章。<br>Markdown 就好似介于 Word 与 TXT 文本之间。Word 体积大、大部分功能实际上根本用不到，且最后的文档常常带有许多冗余信息。<br>而 TXT 却无法实现加粗、标题、下划线、水平分割线等常用的功能。<br>（这里所说的 TXT 只是一种纯文本格式的代称，实际上 Markdown 也是纯文本文件，不过通过语法和 Markdown 编译器，我们就可以看到一些简单的样式。）</p>
</blockquote>
<p>譬如本文就是通过 Markdown 编写。</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="section"># 一级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 二级标题</span></span><br><span class="line"></span><br><span class="line"><span class="strong">**加粗文字**</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>更多语法（虽然说是更多，但是其实也没多少）：<a target="_blank" rel="noopener" href="https://github.com/younghz/Markdown">Markdown 基本语法</a></p>
</blockquote>
<p>这是我写的一个 Markdown 样式：<a target="_blank" rel="noopener" href="https://www.yunyoujun.cn/star-markdown-css/">star-markdown-css</a></p>
<p>上面是渲染过后的效果，你可以与其 Markdown 的<a target="_blank" rel="noopener" href="https://raw.githubusercontent.com/YunYouJun/star-markdown-css/master/demo/md/demo.md">纯文本原文</a>进行对比。</p>
<h4 id="页面"><a href="#页面" class="headerlink" title="页面"></a>页面</h4><p>你可以新建一些自己的自定义页面。</p>
<p>譬如直接在 Hexo 目录下的 <code>source</code> 文件夹下直接新建 HTML 进行编写。</p>
<p>也可以通过以下命令来新建页面。（当然还是 Markdown，不过也是可以在 Markdown 里写 HTML 的，也会被渲染出来。）</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">hexo new page xxx</span><br></pre></td></tr></table></figure>

<blockquote>
<p>至于对应的参数配置，请参考主题文档</p>
</blockquote>
<h2 id="FAQ"><a href="#FAQ" class="headerlink" title="FAQ"></a>FAQ</h2><h3 id="视频？"><a href="#视频？" class="headerlink" title="视频？"></a>视频？</h3><p>没有视频，一是懒，二是文字更利于更新勘误。</p>
<p>以及文章中将会频繁出现参考链接，更方便使用。</p>
<h3 id="如何绑定你的自定义域名？"><a href="#如何绑定你的自定义域名？" class="headerlink" title="如何绑定你的自定义域名？"></a>如何绑定你的自定义域名？</h3><p>首先，你得有个自己的域名。</p>
<blockquote>
<p>避免广告嫌疑，你可以自行前往相关域名提供商购买。<br><del>但是如果你有幸能看到谷歌广告（概率较小），可以考虑点一点。</del></p>
</blockquote>
<!-- > 原本我的确是这么写的。
> 不过咱的确一直嫖的是[腾讯云](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)，而它又有一个[推广链接](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)。
> 而你通过我这个[链接](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)访问腾讯云注册购买产品，也不会多花钱。所以就不妨[点一下](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)？
> 「你看，很简单吧，谁都不会受伤的世界完成了。」——比企谷八幡 -->

<p>并使用 CNAME 解析到 <code>你的名字.github.io</code>。（当然 A 记录直接解析到 GitHub Pages IP 地址也可以。）</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain">Managing a custom domain for your GitHub Pages site</a></p>
</blockquote>
<p>在 <code>Hexo</code> 工作目录下 <code>source</code> 文件夹下新建 <code>CNAME</code> 文件（没有后缀名）。</p>
<blockquote>
<p>CNAME 即相当于告诉 GitHub 允许将 xxx.github.io 为你的域名提供服务。<br>source 目录下的文件除了特殊的 markdown 会被解析为 html，其余都会原样复制到生成的静态文件夹中。<br>所以你需要在 source 文件夹下建有 CNAME，它会在生成静态文件时，将 CNAME 拷贝到静态文件夹并部署到 master 分支。<br>如果只是在 GitHub 上设置（<code>项目地址页面 -&gt; Settings -&gt; Options -&gt; GitHub Pages -&gt; Custom domain</code>），它会自动添加到 master 分支上，但随后不包含 CNAME 的部署会将其覆盖。</p>
</blockquote>
<p>内容填写你的域名即可。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://help.github.com/en/github/working-with-github-pages/about-custom-domains-and-github-pages">About custom domains and GitHub Pages</a></p>
</blockquote>
<h3 id="备案"><a href="#备案" class="headerlink" title="备案"></a>备案</h3><p>如果想要使用国内的一些服务，比如 CDN，不备案确实寸步难行。</p>
<p>此处我指的是 ICP 备案，并非公安备案。（实际上我从来没有进行过公安备案，且目前在使用服务时，并未受到任何相关限制。）</p>
<p>国内备案往往意味着你还需要一台国内的服务器，譬如通过腾讯云备案时会需要你设置关联的服务器（阿里云应当也是如此）。<br>实际上你的网站并不一定得在这台服务器上，即便你只是免费试用了一个月，但是备案成功了，之后过期了对备案也不会有何影响。</p>
<blockquote>
<p>也就是说你完全可以使用学生优惠（10 元左右）购买一个月的云服务器，用于关联，并在这个月内抓紧备案好，此后云服务器过期不会影响备案问题。<br>学生优惠的话 <a target="_blank" rel="noopener" href="https://www.aliyun.com/minisite/goods?userCode=ixykjqj2">阿里云</a> 或者 <a target="_blank" rel="noopener" href="https://url.cn/PLQYbz6n">腾讯云</a> 都有。</p>
</blockquote>
<p>备案前需要注意的几点就是：</p>
<ul>
<li>确定你的域名是否可以备案</li>
<li>关闭评论区</li>
<li>提交备案时的备注说明不得含有 <code>交流</code> 字样</li>
<li>首页不能含有其他网站的直达链接</li>
<li>遵纪守法无不良信息（这是当然的）</li>
</ul>
<p>你也可以直接关停网站，等待备案成功后再重新打开。（今后每年偶尔会复查，但相对会宽松许多。）</p>
<p>此后，按照网站指引的备案步骤一步步来即可。（以前还要等待幕布寄送拍照，现在可以直接在手机上人脸验证）</p>
<p>备案成功后页脚必须清晰地展示备案号，且备案号含有指向 <a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/">http://www.beian.miit.gov.cn/</a> 的超链接。</p>
<h2 id="源文件备份"><a href="#源文件备份" class="headerlink" title="源文件备份"></a>源文件备份</h2><h3 id="备份什么？"><a href="#备份什么？" class="headerlink" title="备份什么？"></a>备份什么？</h3><p>百密总有一疏，因此我们需要做好博客源文件的备份，你固然可以直接将整个文件夹打包，但当你后续安装的插件越来越多，你会发现压缩或者解压耗时越来越长，实际上我们只需要备份<code>根目录</code>的几个文件（夹）即可，<code>source</code>文件夹（里面存放着你博客的主要资源），<code>_config.yml</code>（HEXO的配置，如果你不升级HEXO的话，这个也是很重要的），然后就是<code>package.json</code>（和它的名字一样，他能告诉你你安装了哪些插件及其对应的版本），有了这些你就能在另外一台电脑上很快恢复你的博客环境（当然我本人采用了<code>Cloud Studio</code>作为临时环境，也是不错的）</p>
<p>我的<code>package.json</code>一览，如果其中一些插件你也有兴趣可以按照插件官方说明尝试，这里不做功能注释，虽然总会踩一些奇奇怪怪的坑，但当你慢慢修正时，虽然很折腾，但的确是乐在其中</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;hexo-site&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;0.0.0&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;private&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;build&quot;</span>: <span class="string">&quot;hexo generate&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;clean&quot;</span>: <span class="string">&quot;hexo clean&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;deploy&quot;</span>: <span class="string">&quot;hexo deploy&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;server&quot;</span>: <span class="string">&quot;hexo server&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;hexo&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;5.0.0&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;dependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;cheerio&quot;</span>: <span class="string">&quot;^1.0.0-rc.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;cnpm&quot;</span>: <span class="string">&quot;^6.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-htmlmin&quot;</span>: <span class="string">&quot;^5.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo&quot;</span>: <span class="string">&quot;^5.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-abbrlink&quot;</span>: <span class="string">&quot;^2.2.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-baidu-url-submit&quot;</span>: <span class="string">&quot;0.0.6&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-deployer-git&quot;</span>: <span class="string">&quot;^2.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-feed&quot;</span>: <span class="string">&quot;^1.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-archive&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-baidu-sitemap&quot;</span>: <span class="string">&quot;^0.1.9&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-category&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-index&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-search&quot;</span>: <span class="string">&quot;^2.4.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-sitemap&quot;</span>: <span class="string">&quot;^2.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-tag&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-render-pug&quot;</span>: <span class="string">&quot;^2.1.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-ejs&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-marked&quot;</span>: <span class="string">&quot;^3.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-pug&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-stylus&quot;</span>: <span class="string">&quot;^1.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-server&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-tag-aplayer&quot;</span>: <span class="string">&quot;^3.0.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-wordcount&quot;</span>: <span class="string">&quot;^6.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;imagemin&quot;</span>: <span class="string">&quot;^7.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;npm-check&quot;</span>: <span class="string">&quot;^5.9.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;terser&quot;</span>: <span class="string">&quot;^4.8.0&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;devDependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;gulp&quot;</span>: <span class="string">&quot;^4.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-clean-css&quot;</span>: <span class="string">&quot;^4.3.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-htmlclean&quot;</span>: <span class="string">&quot;^2.7.22&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-imagemin&quot;</span>: <span class="string">&quot;^7.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-uglify&quot;</span>: <span class="string">&quot;^3.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;workbox-build&quot;</span>: <span class="string">&quot;^5.1.3&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="备份方式"><a href="#备份方式" class="headerlink" title="备份方式"></a>备份方式</h3><p>不能在一棵树上吊死，所以我选择了多平台备份，分别是Github,Gitee,Coding三个平台，多一个平台，多一份保障，这里注册账号实名认证什么的不再赘述，大家应该都会，注意的一点就是我们建的仓库选择**<code>私有仓库</code>**，不然别人把你md一拷走，就成别人的的了，不过大多数人比较自觉，我们这静态博客，F12源码什么的也看的清清楚楚，爬走很简单，主要靠自觉，防止转载（其实无所谓，秉着开源共享的理念，其实标明出处大家也就不会特别在意）</p>
<p>首先在博客<code>根目录</code>使用以下命令初始化本地仓库添加一个远程仓库</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git init</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果本地未显示.git文件夹，请注意打开显示隐藏文件夹</p>
</blockquote>
<p>然后运行 <code>git remote add &lt;shortname&gt; &lt;url&gt;</code> 添加一个新的远程 Git 仓库，同时指定一个方便使用的简写：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git remote add &lt;shortname&gt; &lt;url&gt;</span><br></pre></td></tr></table></figure>

<p>比如 <code>git remote add origin git@github.com:CCKNBC/Hexo.git</code>，添加多个仓库地址等更多操作请参考**<a href="%5Bhttps://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8%5D(https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8)">Git-基础-远程仓库的使用</a>**，按照个人喜好来添加多个仓库地址，我这里全部使用的origin,通过手动添加了coding,gitee的仓库地址，不影响使用就行</p>
<p>然后我们运行<code>git remote -v</code>查看一下结果，是自己想要的即可</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">origin  git@github.com:CCKNBC&#x2F;Hexo.git (fetch)</span><br><span class="line">origin  git@github.com:CCKNBC&#x2F;Hexo.git (push)</span><br><span class="line">origin  git@e.coding.net:ccknbc&#x2F;blog&#x2F;source.git (push)</span><br><span class="line">origin  git@gitee.com:ccknbc&#x2F;blog.git (push)</span><br></pre></td></tr></table></figure>

<p>然后我们就可以推送对应的内容了</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git pull</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;%date% %time%: Updated By CCKNBC Local&quot;</span></span><br><span class="line">git push origin -u</span><br></pre></td></tr></table></figure>

<blockquote>
<p>上面<code>git push origin -u</code>这个是因为第一次推送，我们采取强制推送，如果还是不行我们<code>git push origin -f</code>（因为是第一次无所谓，以后请不要随意使用-f），以后我们只需要<code>git push</code>即可，同时commit的内容请根据实际需要自行修改</p>
</blockquote>
<p>以下是我的<code>.git/config</code>一览,设置好后你可以更换你的第一个url，也就是fetch仓库，根据个人喜好来（或者说网络原因），下面使用的是github的，那么git pull等操作就会按照这个仓库来和本地做比较，选择一个连接比较快的就好</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[core]</span><br><span class="line">	repositoryformatversion &#x3D; 0</span><br><span class="line">	filemode &#x3D; false</span><br><span class="line">	bare &#x3D; false</span><br><span class="line">	logallrefupdates &#x3D; true</span><br><span class="line">	symlinks &#x3D; false</span><br><span class="line">	ignorecase &#x3D; true</span><br><span class="line">[remote &quot;origin&quot;]</span><br><span class="line">	url &#x3D; git@github.com:CCKNBC&#x2F;Hexo.git</span><br><span class="line">	fetch &#x3D; +refs&#x2F;heads&#x2F;*:refs&#x2F;remotes&#x2F;origin&#x2F;*</span><br><span class="line">	url &#x3D; git@e.coding.net:ccknbc&#x2F;blog&#x2F;source.git</span><br><span class="line">	url &#x3D; git@gitee.com:ccknbc&#x2F;blog.git</span><br><span class="line">[branch &quot;master&quot;]</span><br><span class="line">	remote &#x3D; origin</span><br><span class="line">	merge &#x3D; refs&#x2F;heads&#x2F;master</span><br></pre></td></tr></table></figure>

<p>在上面的添加多个仓库中，个人因为懒的输入命令，所以直接手动添加的下面两行，反正目的达到就行</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">url = git@e.coding.net:ccknbc/blog/source.git</span><br><span class="line">url = git@gitee.com:ccknbc/blog.git</span><br></pre></td></tr></table></figure>
<p>然后在配置好公钥的情况下，强制推送即可，至此，你的博客源文件已经推送至你的备份仓库，可以去查看是否有一条强制推送的commit记录了，同时检查是否有<code>theme</code>文件夹（因为涉及到后面的魔改，部分源文件修改，因此我们也做好备份），如果没有，检查主题文件夹是否有<code>.git</code>文件夹，删掉后再次推送即可</p>
<h2 id="如何优雅的魔改"><a href="#如何优雅的魔改" class="headerlink" title="如何优雅的魔改"></a>如何优雅的魔改</h2><p>在不动主题源文件方便日后升级的情况下，我们大部分采用外部引入css,js的方式实现，同时上传至github，借用jsDelivr提供的CDN加速服务快速引用</p>
<p>在博客根目录<code>source</code>文件夹下新建一个<code>xxx.js</code>和<code>xxx.css</code>，名字自己取就行，最后我们正确引入即可，在主题配置文件<code>butterfly.yml</code>（下文将直接简写根配（根目录的_confg.yml），主配（主题配置<code>source</code>目录下的butterfly.yml））搜索inject,然后在以下位置插入对应的css和js即可，例如，我是存放在主题文件夹子文件夹css和js内</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span> </span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io@latest/css/ccknbc.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io@latest/js/ccknbc.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure>

<p>所以按照上面所说的对应的你的链接即为，其中<code>your name</code>是你的github用户名，请注意根据具体路径变通</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;your name&#x2F;your name.github.io@latest&#x2F;xxx.css</span><br><span class="line">https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;your name&#x2F;your namec.github.io@latests&#x2F;xxx.js</span><br></pre></td></tr></table></figure>

<p>若是本地预览就可使用（请根据路径自己修改）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;css&#x2F;ccknbc.css</span><br><span class="line">&#x2F;js&#x2F;ccknbc.js</span><br></pre></td></tr></table></figure>

<p>接下来分别编辑css和js文件即可，当然你可以直接复制粘贴或者直接引用我的链接</p>
<p><strong><code>css</code></strong></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;sleek&#x27;</span>;</span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*标题颜色修改*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#site_title</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#site-name</span><span class="selector-class">.blog_title</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 滚动条 */</span></span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar &#123;</span><br><span class="line">    width: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar-thumb &#123;</span><br><span class="line">    background-color: <span class="number">#8FBC8F</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>( <span class="number">45deg</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">25%</span>, transparent <span class="number">25%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">75%</span>, transparent <span class="number">75%</span>, transparent);</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">2em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar-corner &#123;</span><br><span class="line">    background-color: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-moz-selection &#123;</span><br><span class="line">    color: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#web_bg</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(</span><br><span class="line">      <span class="number">90deg</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.layout_post</span>&gt;<span class="selector-id">#post</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,.<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标图标 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/Jkll8I.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*a标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*按钮*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*i标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">i</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*页脚a标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* #footer-wrap a:hover &#123;</span></span><br><span class="line"><span class="comment">    text-decoration: none;</span></span><br><span class="line"><span class="comment">    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*分页器*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#pagination</span> <span class="selector-class">.page-number</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*头部的导航栏*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.site-page</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(<span class="string">https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png</span>), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* a(链接)标签的默认颜色 */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 宽度大于800小于9999执行 */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* @media only screen and (min-width: 800px) and (max-width: 9999px) &#123;</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">    #article-container a &#123;</span></span><br><span class="line"><span class="comment">        color: #00c4b6;</span></span><br><span class="line"><span class="comment">        display: inline-block;</span></span><br><span class="line"><span class="comment">        position: relative;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 打造效果渐变 */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> Gradient &#123;</span><br><span class="line">    <span class="number">0%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">50%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">100%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@-moz-keyframes</span> Gradient &#123;</span><br><span class="line">    <span class="number">0%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">50%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">100%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> Gradient &#123;</span><br><span class="line">    <span class="number">0%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">50%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">100%</span> &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#subtitle</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(-<span class="number">45deg</span>, <span class="number">#ffecd2</span>, <span class="number">#fcb69f</span>, <span class="number">#84fab0</span>, <span class="number">#8fd3f4</span>,<span class="number">#fddb92</span>,<span class="number">#d1fdff</span>,<span class="number">#e4afcb</span>,<span class="number">#7edbdc</span>,<span class="number">#eea2a2</span>,<span class="number">#7ac5d8</span>);</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">400%</span> <span class="number">400%</span>;</span><br><span class="line">    -webkit-<span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">    -moz-<span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">    <span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">    -o-user-select: none;</span><br><span class="line">    -ms-user-select: none;</span><br><span class="line">    -webkit-user-select: none;</span><br><span class="line">    -moz-user-select: none;</span><br><span class="line">    user-select: none;</span><br><span class="line">    -webkit-<span class="attribute">background-clip</span>: text;</span><br><span class="line">    -webkit-text-fill-<span class="attribute">color</span>: transparent;</span><br><span class="line">    <span class="attribute">border-top-left-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border-top-right-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#subtitle</span>:before &#123;</span><br><span class="line">    background-color: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong><code>js</code></strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 设置页脚博主会动的心</span></span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    $(<span class="string">&#x27;.copyright&#x27;</span>).html(<span class="string">&#x27;©2020 &lt;i style=&quot;color:#49B1F5;animation: announ_animation 0.8s linear infinite;&quot; class=&quot;fa fa-heartbeat&quot;&gt;&lt;/i&gt; CC康纳百川&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(aidaori())&#123;</span><br><span class="line">    $(<span class="string">&quot;html&quot;</span>).css(&#123;</span><br><span class="line">        <span class="string">&quot;filter&quot;</span>:<span class="string">&quot;gray !important&quot;</span>,</span><br><span class="line">        <span class="string">&quot;filter&quot;</span>:<span class="string">&quot;progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-webkit-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-moz-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-ms-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-o-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span> </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在特定日期变灰</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">aidaori</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> aidaoriarr=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&quot;0403&quot;</span>,<span class="string">&quot;0404&quot;</span>,<span class="string">&quot;0405&quot;</span>,<span class="string">&quot;0406&quot;</span>,<span class="string">&quot;0414&quot;</span>,<span class="string">&quot;0512&quot;</span>,<span class="string">&quot;0807&quot;</span>,<span class="string">&quot;0909&quot;</span>,<span class="string">&quot;1213&quot;</span>);</span><br><span class="line">    <span class="comment">//2020年4月4日 新冠肺炎哀悼日，清明节</span></span><br><span class="line">    <span class="comment">//2010年4月14日，青海玉树地震</span></span><br><span class="line">    <span class="comment">//2008年5月12日，四川汶川地震</span></span><br><span class="line">    <span class="comment">//2010年8月7日，甘肃舟曲特大泥石流</span></span><br><span class="line">    <span class="comment">//1976年9月9日，毛泽东逝世</span></span><br><span class="line">    <span class="comment">//1937年12月13日，南京大屠杀</span></span><br><span class="line">    <span class="keyword">var</span> mydate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">    <span class="keyword">var</span> str = <span class="string">&quot;&quot;</span>;<span class="comment">// + mydate.getFullYear();</span></span><br><span class="line">    <span class="keyword">var</span> mm = mydate.getMonth()+<span class="number">1</span>;</span><br><span class="line">    <span class="keyword">if</span>(mydate.getMonth()&gt;<span class="number">9</span>)&#123;</span><br><span class="line">      str += mm;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      str += <span class="string">&quot;0&quot;</span> + mm;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(mydate.getDate()&gt;<span class="number">9</span>)&#123;</span><br><span class="line">      str += mydate.getDate();</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      str += <span class="string">&quot;0&quot;</span> + mydate.getDate();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(aidaoriarr.indexOf(str)&gt;-<span class="number">1</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可爱的Title</span></span><br><span class="line"><span class="keyword">var</span> OriginTitle = <span class="built_in">document</span>.title;</span><br><span class="line"><span class="keyword">var</span> titleTime;</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;visibilitychange&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.hidden) &#123;</span><br><span class="line">        $(<span class="string">&#x27;[rel=&quot;icon&quot;]&#x27;</span>).attr(<span class="string">&#x27;href&#x27;</span>, <span class="string">&quot;https://cdn.jsdelivr.net/gh/CCKNBC/CDN/logo/ccknbc.png&quot;</span>);</span><br><span class="line">        <span class="built_in">document</span>.title = <span class="string">&#x27;(つェ⊂) 我藏好了哦~~&#x27;</span>;</span><br><span class="line">        <span class="built_in">clearTimeout</span>(titleTime);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        $(<span class="string">&#x27;[rel=&quot;icon&quot;]&#x27;</span>).attr(<span class="string">&#x27;href&#x27;</span>, <span class="string">&quot;https://cdn.jsdelivr.net/gh/CCKNBC/CDN/logo/favicon.svg&quot;</span>);</span><br><span class="line">        <span class="built_in">document</span>.title = <span class="string">&#x27;(*´∇｀*) 被你发现啦~~&#x27;</span> + OriginTitle;</span><br><span class="line">        titleTime = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">document</span>.title = OriginTitle;</span><br><span class="line">        &#125;, <span class="number">2000</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>更多类容可以百度，自己DIY，有想法当然要实现啊</p>
<hr>
<h2 id="未完待续…"><a href="#未完待续…" class="headerlink" title="未完待续…"></a>未完待续…</h2>
  
  
    
    <div class='footer'>
      
      
      
        <div class='copyright'>
          <blockquote>
            
              
                <p>博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</p>

              
            
              
                <p>本文永久链接是：<a href=https://ccknbc.github.io/volantis/posts/3/>https://ccknbc.github.io/volantis/posts/3/</a></p>
              
            
          </blockquote>
        </div>
      
      
    </div>
  
  
    


  <div class='article-meta' id="bottom">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateUpdated" datetime="2020-07-01T04:00:00+00:00">
  <a class='notlink'>
    <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
    <p>更新于：2020年7月1日</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/volantis/tags/HEXO/" rel="nofollow"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><p>HEXO</p></a></div>


        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://ccknbc.github.io/volantis/posts/3/&title=HEXO折腾 - CC康纳百川&summary="
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png" class="lazyload" data-srcset="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png" srcset="">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://ccknbc.github.io/volantis/posts/3/&title=HEXO折腾 - CC康纳百川&summary="
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png" class="lazyload" data-srcset="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png" srcset="">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://service.weibo.com/share/share.php?url=https://ccknbc.github.io/volantis/posts/3/&title=HEXO折腾 - CC康纳百川&summary="
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png" class="lazyload" data-srcset="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png" srcset="">
          
        </a>
      
    
      
    
      
    
  </div>
</div>



        
      
    </div>
  </div>


  
  

  
    <div class="prev-next">
      
        <a class='prev' href='/volantis/posts/4/'>
          <p class='title'><i class="fas fa-chevron-left" aria-hidden="true"></i>简单浏览器更新推送的实现</p>
          <p class='content'>这篇文章主要想大家介绍如何使用webpushr及其对应的插件hexo-web-push-notification来帮我们节省时间完成自动推送更新


插件安装npm i hexo-web-pus...</p>
        </a>
      
      
        <a class='next' href='/volantis/posts/2/'>
          <p class='title'>生产实习<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
          <p class='content'>等待更新中 时间为整点定时发布

待同步 取消加密
图片还未上传至图床
视频嵌入还未做好 YouTube已OK 
目录在左侧

超声波及温度传感摇摆风扇所用元件：UNO R3开发板 ×1
大面包...</p>
        </a>
      
    </div>
  
</article>


  

  






</div>
<aside class='l_side'>
  
  
    
    



  <section class="widget toc-wrapper shadow desktop mobile" id="toc-div" >
    
  <header>
    
      <i class="fas fa-list fa-fw" aria-hidden="true"></i><span class='name'>本文目录</span>
    
  </header>


    <div class='content'>
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4"><span class="toc-text">搭建步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">安装 Node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git-%E4%B8%8E-GitHub"><span class="toc-text">Git 与 GitHub</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Git"><span class="toc-text">安装 Git</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C-GitHub"><span class="toc-text">注册 GitHub</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Hexo"><span class="toc-text">安装 Hexo</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%9D"><span class="toc-text">主题安裝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-Hexo-%E4%B8%BB%E9%A2%98"><span class="toc-text">使用 Hexo 主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git-%E5%AE%89%E8%A3%85"><span class="toc-text">Git 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-%E5%AE%89%E8%A3%85"><span class="toc-text">npm 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BA%94%E7%94%A8%E4%B8%BB%E9%A2%98"><span class="toc-text">应用主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6"><span class="toc-text">生成静态文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8E%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E5%BB%BA%E7%AB%8B%E5%85%B3%E8%81%94"><span class="toc-text">与远程仓库建立关联</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%83%A8%E7%BD%B2"><span class="toc-text">部署</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E4%B8%8E%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2"><span class="toc-text">备份与自动部署</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%80%E5%A7%8B%E5%86%99%E4%BD%9C"><span class="toc-text">开始写作</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E7%AB%A0"><span class="toc-text">文章</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2"><span class="toc-text">页面</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#FAQ"><span class="toc-text">FAQ</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%86%E9%A2%91%EF%BC%9F"><span class="toc-text">视频？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%BB%91%E5%AE%9A%E4%BD%A0%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%EF%BC%9F"><span class="toc-text">如何绑定你的自定义域名？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E6%A1%88"><span class="toc-text">备案</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BA%90%E6%96%87%E4%BB%B6%E5%A4%87%E4%BB%BD"><span class="toc-text">源文件备份</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">备份什么？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E6%96%B9%E5%BC%8F"><span class="toc-text">备份方式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E4%BC%98%E9%9B%85%E7%9A%84%E9%AD%94%E6%94%B9"><span class="toc-text">如何优雅的魔改</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AA%E5%AE%8C%E5%BE%85%E7%BB%AD%E2%80%A6"><span class="toc-text">未完待续…</span></a></li></ol>
    </div>
  </section>


  


</aside>



      </div>
      
  
  <footer class="footer clearfix">
    <br><br>
    
      
        <div class="aplayer-container">
          


        </div>
      
    
      
        <br>
        <div class="social-wrapper">
          
            
          
            
          
            
          
        </div>
      
    
      
        <div><p>博客内容遵循 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</a></p>
</div>
      
    
      
        
          <div><p><span id="lc-sv">本站总访问量为 <span id='number'><i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i></span> 次</span> <span id="lc-uv">访客数为 <span id='number'><i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i></span> 人</span></p>
</div>
        
      
    
      
        本站使用
        <a href="https://github.com/volantis-x/hexo-theme-volantis/tree/4.0.0-rc.4" target="_blank" class="codename">Volantis</a>
        作为主题
      
    
      
        <div class='copyright'>
        <p><a href="/">Copyright © 2017-2020 XXX</a></p>

        </div>
      
    
  </footer>


      <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
    </div>
  </div>
  <div>
    <!-- required -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js"></script>

<script>
  function pjax_fancybox() {
    $(".md .gallery").find("img").each(function () { //渲染 fancybox
      var element = document.createElement("a"); // a 标签
      $(element).attr("class", "fancybox");
      $(element).attr("pjax-fancybox", "");  // 过滤 pjax
      $(element).attr("href", $(this).attr("src"));
      if ($(this).attr("data-original")) {
        $(element).attr("href", $(this).attr("data-original"));
      }
      $(element).attr("data-fancybox", "images");
      var caption = "";   // 描述信息
      if ($(this).attr('alt')) {  // 判断当前页面是否存在描述信息
        $(element).attr('data-caption', $(this).attr('alt'));
        caption = $(this).attr('alt');
      }
      var div = document.createElement("div");
      $(div).addClass("fancybox");
      $(this).wrap(div); // 最外层套 div ，其实主要作用还是 class 样式
      var span = document.createElement("span");
      $(span).addClass("image-caption");
      $(span).text(caption); // 加描述
      $(this).after(span);  // 再套一层描述
      $(this).wrap(element);  // 最后套 a 标签
    })
    $(".md .gallery").find("img").fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
      closeClick: true,
      helpers: {
        overlay: {closeClick: true}
      },
      buttons: [
        "zoom",
        "close"
      ]
    });
  };
  function SCload_fancybox() {
    if ($(".md .gallery").find("img").length == 0) return;
    loadCSS("https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css", document.getElementById("loadcss"));
    setTimeout(function() {
      loadScript('https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js', pjax_fancybox)
    }, 1);
  };
  $(function () {
    SCload_fancybox();
  });
</script>


<!-- internal -->







  <script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script>
<script>
  // https://www.npmjs.com/package/vanilla-lazyload
  // Set the options globally
  // to make LazyLoad self-initialize
  window.lazyLoadOptions = {
    elements_selector: ".lazyload",
    threshold: 0
  };
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window.addEventListener(
    "LazyLoad::Initialized",
    function (event) {
      window.lazyLoadInstance = event.detail.instance;
    },
    false
  );
  document.addEventListener('DOMContentLoaded', function () {
    lazyLoadInstance.update();
  });
  document.addEventListener('pjax:complete', function () {
    lazyLoadInstance.update();
  });
</script>




  
  
    <script>
      window.FPConfig = {
        delay: 0,
        ignoreKeywords: [],
        maxRPS: 5,
        hoverDelay: 25
      };
    </script>
    <script defer src="https://cdn.jsdelivr.net/gh/gijo-varghese/flying-pages@2.1.2/flying-pages.min.js"></script>
  















  
<script src="/volantis/js/app.js"></script>




  
    
<script src="/volantis/js/search.js"></script>

  


<!-- optional -->

  <script>
const SearchServiceimagePath="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/img/";
const ROOT =  ("/volantis/" || "/").endsWith('/') ? ("/volantis/" || "/") : ("/volantis//" || "/" );
(function ($) {
  
    customSearch = new HexoSearch({
      imagePath: SearchServiceimagePath
    });
  
})(jQuery);

</script>











  <script defer>

  const LCCounter = {
    app_id: 'yPKOAo6M4zHWCq3jzS0iqLEW-MdYXbMMI',
    app_key: 'Vt6syMPvpjnscIVTQNFAX0jj',
    custom_api_server: '',

    // 查询存储的记录
    getRecord(Counter, url, title) {
      return new Promise(function (resolve, reject) {
        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({url})))
          .then(resp => resp.json())
          .then(({results, code, error}) => {
            if (code === 401) {
              throw error;
            }
            if (results && results.length > 0) {
              var record = results[0];
              resolve(record);
            } else {
              Counter('post', '/classes/Counter', {url, title: title, times: 0})
                .then(resp => resp.json())
                .then((record, error) => {
                  if (error) {
                    throw error;
                  }
                  resolve(record);
                }).catch(error => {
                console.error('Failed to create', error);
                reject(error);
              });
            }
          }).catch((error) => {
          console.error('LeanCloud Counter Error:', error);
          reject(error);
        });
      })
    },

    // 发起自增请求
    increment(Counter, incrArr) {
      return new Promise(function (resolve, reject) {
        Counter('post', '/batch', {
          "requests": incrArr
        }).then((res) => {
          res = res.json();
          if (res.error) {
            throw res.error;
          }
          resolve(res);
        }).catch((error) => {
          console.error('Failed to save visitor count', error);
          reject(error);
        });
      });
    },

    // 构建自增请求体
    buildIncrement(objectId) {
      return {
        "method": "PUT",
        "path": `/1.1/classes/Counter/${ objectId }`,
        "body": {
          "times": {
            '__op': 'Increment',
            'amount': 1
          }
        }
      }
    },

    // 校验是否为有效的 UV
    validUV() {
      var key = 'LeanCloudUVTimestamp';
      var flag = localStorage.getItem(key);
      if (flag) {
        // 距离标记小于 24 小时则不计为 UV
        if (new Date().getTime() - parseInt(flag) <= 86400000) {
          return false;
        }
      }
      localStorage.setItem(key, new Date().getTime().toString());
      return true;
    },

    addCount(Counter) {
      var enableIncr = '' === 'true' && window.location.hostname !== 'localhost';
      enableIncr = true;
      var getterArr = [];
      var incrArr = [];
      // 请求 PV 并自增
      var pvCtn = document.querySelector('#lc-sv');
      if (pvCtn || enableIncr) {
        var pvGetter = this.getRecord(Counter, 'https://ccknbc.github.io/volantis' + '/#lc-sv', 'Visits').then((record) => {
          incrArr.push(this.buildIncrement(record.objectId))
          var eles = document.querySelectorAll('#lc-sv #number');
          if (eles.length > 0) {
            eles.forEach((el,index,array)=>{
              el.innerText = record.times + 1;
              if (pvCtn) {
                pvCtn.style.display = 'inline';
              }
            })
          }
        });
        getterArr.push(pvGetter);
      }

      // 请求 UV 并自增
      var uvCtn = document.querySelector('#lc-uv');
      if (uvCtn || enableIncr) {
        var uvGetter = this.getRecord(Counter, 'https://ccknbc.github.io/volantis' + '/#lc-uv', 'Visitors').then((record) => {
          var vuv = this.validUV();
          vuv && incrArr.push(this.buildIncrement(record.objectId))
          var eles = document.querySelectorAll('#lc-uv #number');
          if (eles.length > 0) {
            eles.forEach((el,index,array)=>{
              el.innerText = record.times + (vuv ? 1 : 0);
              if (uvCtn) {
                uvCtn.style.display = 'inline';
              }
            })
          }
        });
        getterArr.push(uvGetter);
      }

      // 请求文章的浏览数，如果是当前页面就自增
      var allPV = document.querySelectorAll('#lc-pv');
      if (allPV.length > 0 || enableIncr) {
        for (i = 0; i < allPV.length; i++) {
          let pv = allPV[i];
          let title = pv.getAttribute('data-title');
          var url = 'https://ccknbc.github.io/volantis' + pv.getAttribute('data-path');
          if (url) {
            var viewGetter = this.getRecord(Counter, url, title).then((record) => {
              // 是当前页面就自增
              let curPath = window.location.pathname;
              if (curPath.includes('index.html')) {
                curPath = curPath.substring(0, curPath.lastIndexOf('index.html'));
              }
              if (pv.getAttribute('data-path') == curPath) {
                incrArr.push(this.buildIncrement(record.objectId));
              }
              if (pv) {
                var ele = pv.querySelector('#lc-pv #number');
                if (ele) {
                  if (pv.getAttribute('data-path') == curPath) {
                    ele.innerText = (record.times || 0) + 1;
                  } else {
                    ele.innerText = record.times || 0;
                  }
                  pv.style.display = 'inline';
                }
              }
            });
            getterArr.push(viewGetter);
          }
        }
      }

      // 如果启动计数自增，批量发起自增请求
      if (enableIncr) {
        Promise.all(getterArr).then(() => {
          incrArr.length > 0 && this.increment(Counter, incrArr);
        })
      }

    },


    fetchData(api_server) {
      var Counter = (method, url, data) => {
        return fetch(`${ api_server }/1.1${ url }`, {
          method,
          headers: {
            'X-LC-Id': this.app_id,
            'X-LC-Key': this.app_key,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data)
        });
      };
      this.addCount(Counter);
    },

    refreshCounter() {
      var api_server = this.app_id.slice(-9) !== '-MdYXbMMI' ? this.custom_api_server : `https://${ this.app_id.slice(0, 8).toLowerCase() }.api.lncldglobal.com`;
      if (api_server) {
        this.fetchData(api_server);
      } else {
        fetch('https://app-router.leancloud.cn/2/route?appId=' + this.app_id)
          .then(resp => resp.json())
          .then(({api_server}) => {
            this.fetchData('https://' + api_server);
          });
      }
    }

  };

  LCCounter.refreshCounter();

  document.addEventListener('pjax:complete', function () {
    LCCounter.refreshCounter();
  });
</script>



<!-- more -->


    
      


<script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js"></script>

<!-- 样式位于：source/css/_third-party/pjaxanimate.styl -->

<div class="pjax-animate">
  
    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
    <div id="loading-bar-wrapper"><script>NProgress.configure({parent:"#loading-bar-wrapper",trickleSpeed: 100})</script></div>
    <script>
      window.ShowLoading = function() {
        NProgress.start();
      };
      window.HideLoading = function() {
        NProgress.done();
      }
    </script>
  
</div>

<script>
    var pjax;
    document.addEventListener('DOMContentLoaded', function () {
      pjax = new Pjax({
        elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox])',
        selectors: [
          "title",
          "#pjax-container",
          "#pjax-header-nav-list"
        ],
        cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
        timeout: 5000
      });
    });

    document.addEventListener('pjax:send', function (e) {
      window.stop(); // 相当于点击了浏览器的停止按钮

      try {
        var currentUrl = window.location.pathname;
        var targetUrl = e.triggerElement.href;
        var banUrl = [""];
        if (banUrl[0] != "") {
          banUrl.forEach(item => {
            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
              window.location.href = targetUrl;
            }
          });
        }
      } catch (error) {}

      window.subData = null; // 移除标题（用于一二级导航栏切换处）
      if (typeof $.fancybox != "undefined") {
        $.fancybox.close();    // 关闭弹窗
      }
      $('.l_header .switcher .s-search').removeClass('active'); // 关闭移动端激活的搜索框
      $('.l_header').removeClass('z_search-open'); // 关闭移动端激活的搜索框
      $('.wrapper').removeClass('sub'); // 跳转页面时关闭二级导航

      // 解绑事件 避免重复监听
      $('.s-top').unbind('click');
      $('.menu a').unbind('click');
      $(window).unbind('resize');
      $(window).unbind('scroll');
      $(document).unbind('scroll');
      $(document).unbind('click');
      $('body').unbind('click');
      window.ShowLoading();
    });

    document.addEventListener('pjax:complete', function () {
      // 关于百度统计对 SPA 页面的处理：
      // 方案一：百度统计>管理>单页应用设置中，打开开启按钮即可对SPA进行统计。 https://tongji.baidu.com/web/help/article?id=324
      // 方案二：取消注释下列代码。 https://tongji.baidu.com/web/help/article?id=235
      // 

      // 关于谷歌统计对 SPA 页面的处理：
      // 当应用以动态方式加载内容并更新地址栏中的网址时，也应该更新通过 gtag.js 存储的网页网址。
      // https://developers.google.cn/analytics/devguides/collection/gtagjs/single-page-applications?hl=zh-cn
      

      $('.nav-main').find('.list-v').not('.menu-phone').removeAttr("style",""); // 移除小尾巴的移除
      $('.menu-phone.list-v').removeAttr("style",""); // 移除小尾巴的移除
      $('script[data-pjax], .pjax-reload script').each(function () {
        $(this).parent().append($(this).remove());
      });
      try{
          if (typeof $.fancybox == "undefined") {
            SCload_fancybox();
          } else {
            pjax_fancybox();
          }
        
        
        
        
        
        
        
        
        
        
      } catch (e) {
        console.log(e);
      }
      window.HideLoading();
    });

    document.addEventListener('pjax:error', function (e) {
      window.HideLoading();
      window.location.href = e.triggerElement.href;
    });
</script>

    
  </div>
</body>
</html>
